<template>
  <div class="content">
    <el-card
      class="box-card"
      @click.native="toForum(item.id)"
      v-for="item in forumList"
      :key="item.id"
    >
      <el-image
        style="width: 100%; height: 100px"
        :src="item.avatar"
        fit="contain"
      >
      </el-image>
      <h2 class="title">{{ item.forumName }}</h2>

      <div class="detail">
        <span class="following-count">关注: {{ item.subscribe }}</span>
        &nbsp;&nbsp;&nbsp;
        <span class="post-count">帖子: {{ item.postCount }}</span>
      </div>
    </el-card>
    <el-skeleton :loading="loading" :rows="6" animated />
    <el-empty v-if="page.total == 0 && !loading" description="空空如也~"></el-empty>
  </div>
</template>

<script>
import forumApi from '@/axios/forumApi';
import PageMixin from "@/mixins/PageMixin";
export default {
    mixins: [PageMixin],
 data() {
    return {
        forumList:[]
    }
 },
 methods: {
    fetchData() {
        forumApi.getFollowingList({...this.page})
        .then(({data})=>{

           this.forumList = data.data.records.map(r=>r.forum)
            this.page.total = data.data.total;
            this.page.pages = data.data.pages;
            //关闭加载动画
            this.loading = false;
        })
    }
 },
 load() {
    this.page.current++;
    this.fetchData()
 },
 created() {
    this.fetchData()
 },
};
</script>

<style scoped lang="less">
@import "@/assets/less/common.less";
.content {
  display: flex;
  margin-top: 50px;
  // margin:0 10px 10px 0;
  // flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;

  .el-card {
    width: 210px;
    height: 210px;
    margin-bottom: 40px;
    margin-right: 30px;
    cursor: pointer;
   
    .title {
      font-weight: 400;
      text-align: center;
    }
    .detail {
      text-align: center;
      margin-top: 10px;
      font-size: 14px;
      color: @regularText;
    }
  }
}
</style>